<template>
  <view v-if="item" class="news-common-content">
    <view class="title-box" @click="itemClick">
      <text class="title-text andr-common-line-height">
        {{ item.title }}
      </text>
      <text class="time-text">{{ item.publishTime }}</text>
    </view>
    <view class="newsImage-text" @click="itemClick">
      <fr-image class="andr-common-borderR8 w-100 h-100" :src="item.thumb" :alt="item.title" />
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ListItem',
    components: {},
    props: {
      item: {
        type: Object,
        require: true,
      },
      canIntegral: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        integral: 5, // 每篇分数
      };
    },
    methods: {
      itemClick() {
        this.h5uniNavTo(`/pages/shows/index?id=${this.item.id}`);
        this.canIntegral && this.getIntegral();
      },
      h5uniNavTo(url) {
        const link = url + (url.includes('?') ? '&' : '?') + 'time=' + new Date().getTime();
        h5uni.navigateTo({ url: `${link}` });
      },
      async getIntegral() {
        try {
          this.$store.state.integral.integral.article.num <
            this.$store.state.integral.integral.article.max &&
            this.$store.dispatch('integral/getIntegral', 'article');
          /* await this.$store.dispatch('integral/getArticleClickNum');
          // await this.$store.dispatch('integral/dayIntegral'); */
        } catch (e) {}
      },
    },
  };
</script>

<style lang="scss" scoped>
  .news-common-content {
    padding: 10px 10px;
    font-size: 0;
    display: flex;
    background-color: #fff;
    border-bottom: 2px solid #e4e7ed;
  }

  .title-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin-right: 10px;
  }
  .title-text {
    font-size: 17px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .time-text {
    font-size: 13px;
    color: #909399;
  }
  .newsImage-text {
    width: 2.933rem;
    height: 2rem;
  }

  .andr-common-borderR8 {
    border-radius: 3px;
  }
  .andr-common-line-height {
    line-height: 1.5;
  }
</style>
